<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { projectListApi } from "@/api";
const route = useRoute();
const router = useRouter();
const c_id = ref("");
const c_name = ref("");
const projectList = ref([]);
const getProjectList = () => {
  projectListApi({ project_area_id: c_id.value, page_size: 1000 }).then(
    (res) => {
      projectList.value = res.items;
    }
  );
};

const toDetails = (id) => {
  router.push({
    path: "/projectDetails",
    query: {
      id,
    },
  });
};

watch(
  () => route.query,
  (newVal) => {
    if (!newVal.id) return;
    c_id.value = newVal.id;
    c_name.value = newVal.name;
    getProjectList();
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="max-w-[1200px] mx-auto">
    <div class="text-center pt-5 pb-5 lg:pt-14 lg:pb-14">
      <h1 class="text-3xl mb-5">{{ c_name }}项目</h1>
      <div class="text-[18px] text-[#555]">拿一个海外身份，享医疗教育福利</div>
    </div>
    <div class="grid lg:grid-cols-2 gap-5 items-start p-3 pb-5 lg:pb-20">
      <div
        class="item bg-white lg:bg-transparent cursor-pointer group flex flex-col items-center lg:flex-row gap-5 rounded-md overflow-hidden"
        v-for="item in projectList"
        :key="'project_' + item.id"
      >
        <div class="w-full lg:w-[50%] pb-[66%] lg:pb-[30%] relative">
          <img
            class="absolute w-full h-full object-cover rounded-l-md"
            :src="item.project_image_url_1"
            alt=""
          />
        </div>
        <div class="flex-1 flex flex-col justify-between p-5 leading-relaxed">
          <div>
            <div class="text-xl">{{ item.project_title }}</div>
            <div>获得身份: {{ item.project_obtain_identity }}</div>
            <div>资产要求: {{ item.project_asset_requirements }}</div>
            <div>办理周期: {{ item.project_handle_cycle }}</div>
          </div>
          <div
            class="h-8 w-24 leading-8 text-center border rounded-md group-hover:bg-active group-hover:text-white"
            @click="toDetails(item.id)"
          >
            查看详情
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  transition: all 0.3s ease-in-out;
  &:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
}
</style>
